<template>
    <div v-if="department_right_details" class="department-right-details">
        <header>{{department_right_details.name}}</header>
        <div class="block">
            <div class="img-block">
                <img :src="department_right_details.file" alt="logo">
            </div>
            <div class="show-num">
                <div class="show-data show-data-border">
                    <div class="num">{{department_right_details.child_qty}}</div>
                    <div class="num-desc">子部门数</div>
                </div>
                <div class="show-data pl30">
                    <div class="num">{{department_right_details.user_qty}}</div>
                    <div class="num-desc">部门人数</div>
                </div>
                <div class="details-remark">
                    <p><span>备注：</span>{{department_right_details.remark}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "department-right-details",
    computed: {
        ...mapGetters("department1", ["department_right_details"])
    }
};
</script>

<style scoped>
.department-right-details {
    font-family:PingFangSC-Semibold;
    height: 300px;
    margin: 0 auto;
}
.block {
    padding: 36px;
}
.department-right-details .img-block {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.department-right-details .img-block img {
    width: 100%;
}
.show-num {
    /* width: 620px; */
    width: 40%;
    display: inline-block;
    height: 150px;
    vertical-align: top;
    margin-left: 15px;
}
.show-data {
    display: inline-block;
    height: 80px;
    padding-right: 24px;
}
.pl30 {
    padding-left: 30px;
}
.show-data-border {
    border-right: 1px solid #d8d8d8;
}
.num {
    font-size: 30px;
}
.num-desc {
    font-size: 14px;
    color: #a8acaf;
}
.details-remark {
    margin-top: 18px;
}
.details-remark span {
    color: #a8acaf;
}
/* .department-right-details .department-dashed {
    width: 250px;
    margin: 0 auto;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    padding-top: 15px;
    padding-bottom: 20px;
}
.department-right-details .department-dashed:nth-of-type(2n) {
    border-bottom: none;
}
.department-right-remark {
    width: 250px;
    margin: 20px auto 40px;
} */
</style>
